import React, { Component } from 'react'
import { withRouter } from "react-router-dom"

/**
 * @param {Object|[]} menus - 需要渲染的菜单数组
 */ 
class Menus extends Component {
  state = {
    index: null
  }
  changeRouter = (menu) => {
    if (this.props.location.pathname !== menu.url){
      this.props.history.push(menu.url)
    }
  }
  render() {
    const { menus } = this.props
    return (
      <div>
        <span
          onClick={() =>{ this.changeRouter({url:'/'})}}
        >
          首页
        </span>  
        {menus.map(menu => (
          <span
            key={menu.url}
            onClick={() =>{ this.changeRouter(menu)}}
          >
            {menu.name}
          </span>
        ))}
      </div>
    )
  }
}

export default withRouter(Menus)
